<template>
    <div class="recommend" id="recommend">
        <!-- 公用模块头部 -->
        <div class="box commengbox" v-if="recommend.length">
            <div class="title" v-if="this.$route.name!='columnlist' && this.$route.name!='nopay'">
                <div class="blue-line background1"></div>
                <span>推荐区</span>
            </div>
        </div>
        
        <div class="list list1" id="activityList">
            <div class="item" v-for="item in recommend" :key="item.id">
                <router-link class="router-div" :to="{name:'column', params:{colId:item.id}}" replace>
                    <div class="item-left">
                        <img class="image" v-lazy="picHead+item.cover">
                        <span class="mark yellow-bg btn1" v-if="item.priceWay == '4'">限免</span>
                        <!-- <span class="mark yellow-bg" v-if="item.priceWay == '5'">会员</span>
                        <span class="mark yellow-bg" v-if="item.priceWay == '6'">会员</span> -->
                    </div>
                    <div class="item-right">
                        <p class="title">{{item.name}}</p>
                        <p class="des">{{item.slogan }}</p>
                        <!-- <span v-if="item.priceWay == '2'" class="icon yellow-border yellow-font">会员免费</span>
                        <span v-if="item.priceWay == '3'" class="icon yellow-border yellow-font">折扣优惠</span>
                        <span v-if="item.priceWay == '7'" class="icon yellow-border yellow-font">会员优惠</span>
                        <p class="state">{{item.stopUpdate? '已完结': '更新中'}}</p> -->
                        <p class="belong-to" v-if="item.latestSingle">{{'最新：' + item.latestSingle.name}}</p>
                        <span class="price-list font1" v-if="item.price!=0">￥{{item.price/100}}</span>
                        <span class="price-list price-free font1" v-if="item.price==0">免费</span>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: ['recommend'],
  data () {
    return {
        picHead : this.$store.state.picHead
    }
  },
  mounted: function() {
//    console.log(this.recommend,'sss')
  },
  updated: function() {

  },
  methods: {

  }
}
</script>
<style lang="less">
/* 模块公共头部 */
.box .title {
    padding: .4rem .4rem;
    height: 1rem;
    line-height: 1rem;
    .blue-line {
        margin-top: .3rem;
        float: left;
        display: inline-block;
        width: .08rem;
        height: .38rem;
        margin-right: .213rem;
        background-color: #6699FF;
    }
    span {
        float: left;
        font-size: 0.48rem;
        color: #333333;
        font-weight: 600;
    }
    a {
        line-height: 1rem;
        float: right;
        font-size: .373rem;
        color: #666666;
        letter-spacing: 0;
    }
}
#recommend{
    .list{margin:0 .533rem;}
    .list .yellow-bg{background:#4EAAFE;}
    .list .yellow-font{color:#4EAAFE;}
    .list .yellow-border{border-color: #4EAAFE;}
    .list1 .item {height:3.2rem;margin-bottom:.8rem;}
    .list1 .item .item-left{width:2.4rem;height:100%;position:relative;float:left;}
    .list1 .item .item-right{height:100%;position: relative;width:6rem;float:right;margin-left: .133rem;}
    .list1 .item .image{width:100%;height:100%;border: 1px solid #eee;}
    .list1 .item .mark{padding: .0534rem .137rem;font-size:.25rem;position:absolute;top:0;left:0;display:inline-block;zoom:1;*display:inline;}
    .list1 .item .title,.list1 .item .des,.list1 .item .state,.list1 .item .belong-to{white-space: nowrap;text-overflow:ellipsis;overflow:hidden;}
    .list1 .item .title{font-size:.42667rem;text-align: left;}
    .list1 .item .des{text-align: left;margin-top:.1334rem;line-height:.534rem;font-size:0.3734rem;color:#666666;}
    .list1 .item .rights{margin-top:.2rem;}
    .list1 .item .item-right .icon{position: absolute;bottom:1.3rem;left:0;padding:.0534rem .314rem;font-size:.2rem;border:1px solid ;display:inline-block;zoom:1;*display:inline;}
    .list1 .item .item-right .state{bottom: .467rem;margin:.17rem 0;font-size:.374rem;position: absolute;text-align: left;}
    .list1 .item .item-right .belong-to{margin-top:.1334rem;width: 100%;font-size:.374rem;bottom:1.3rem;text-align: left;color:#999999;}
    .list1 .yellow-bg{color:#fff;}
    .router-div{height:100%;}
    // .price-free{font-size:.42rem !important}  
    .price-list{width: 100%;position: absolute;bottom:0rem;text-align: left;color:#6699FF;font-size: .4rem;line-height: .48rem;}
}
.commengbox{margin-bottom: 0 !important;}
 
</style>

